<!-- v-model:双向绑定->主要用于表单元素 -->
<!-- 绑定输入框获取输入框的值
 绑定选择框,获取选择框的布尔值 -->
<script setup lang="ts">
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const isChecked = ref(false)
const login = () => {
  if (isChecked.value) {
    console.log(username.value, password.value)
  } else {
    alert('请勾选同意协议')
  }
}
const reset = () => {
  username.value = ''
  password.value = ''
}
</script>

<template>
  <div id="app">
    账户：<input type="text" v-model="username" /> <br /><br />
    密码：<input type="password" v-model="password" /> <br /><br />
    <input type="checkbox" v-model="isChecked" />请勾选隐私协议 <br />
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
</template>

<style></style>
